<template>
  <div>
    <el-dialog
      :title="$t('chatGpt.fastQuote.title')"
      v-model="visibleDialog"
      width="600px"
      :append-to-body="true"
      :close-on-click-modal="false"
      @close="closeClick"
      @open="open"
    >
      <template slot="title">
        <div class="title_box">
          <div><i class="el-icon-s-flag" style="color: #e67e22; font-size: 24px"></i></div>
          <div>
            <div class="title_text1">{{ $t('chatGpt.fastQuote.title') }}</div>
            <div class="title_text2">{{ $t('chatGpt.fastQuote.titleSub') }}</div>
          </div>
        </div>
      </template>
      <div class="quote_list">
        <div class="quote_box" v-for="(item, index) in quoteList" :key="index">
          <div class="quote_heder">
            <el-tag>#{{ item.position }}</el-tag>
          </div>
          <div class="quote_title">
            <!-- <markdown-it-vue :content="item.q.trim()" /> -->
          </div>
          <!-- <div class="quote_content">{{ item.content }}</div> -->
          <div v-html="marked(item.content.trim())" v-highlight></div>
          <div class="quote_foot">
            <div class="quote_foot_left">
              <div v-if="item.content.length != 0" class="quote_foot_left_item">
                <svg-icon icon-class="fwb" />
                <span>{{ item.content.length }}</span>
              </div>
              <el-tag type="info" effect="plain" class="falstelTag" @click="previewFile(item)">
                <!-- <i class="iconfont-el icon-tickets"></i> -->
                <svg-icon :icon-class="selectSvgIcons(item.document_name)"></svg-icon>
                {{ item.document_name }}
              </el-tag>
            </div>

            <!-- <el-button type="text" class="quote_btn"
              @click="pageSkipDetailClick(item)">{{ $t('chatGpt.fastQuote.gotoSkip') }}<i
                class="el-icon-arrow-right"></i></el-button> -->
          </div>
        </div>
      </div>
      <template #footer>
        <span>
          <el-button @click="closeClick">{{ $t('commen.cancel') }}</el-button>
          <el-button type="primary" @click="confirmClick">{{ $t('commen.confirm') }}</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts" name="dify-quote">
import { marked } from 'marked';
const { proxy } = getCurrentInstance() as any;
const visibleDialog = ref(false);
const quoteList = ref([]);

const open = () => {};
const closeClick = () => {
  visibleDialog.value = false;
};
const confirmClick = () => {
  visibleDialog.value = false;
};

const pageSkipDetailClick = (item: any) => {
  // this.$router.push(`/newUi/index/detail?id=${item.datasetId}&collectionId=${item.collectionId}`);
};

// 预览文件
const previewFile = (item: any) => {
  console.log(item);
  let parts = item.document_name.split('.');
  let params = {
    id: item.document_id,
    // id:'96c94422-d906-4a5b-90d5-b103abdc53d5',
    suffix: parts[parts.length - 1],
    libraryType: 'dify'
  };
  proxy.$yuUtils.previewSkipPage(params);
};

//图标转换
const selectSvgIcons = (v: any) => {
  let suffix = v.split('.')[1];
  return proxy.$yuUtils.selectSvgIcon({ suffix: suffix });
};
defineExpose({
  visibleDialog,
  quoteList
});
</script>

<style lang="scss" scoped>
// 文字几行隐藏
@mixin textOverflow($clamp) {
  text-overflow: ellipsis;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: $clamp; //元素几行显示
  -webkit-box-orient: vertical;
}
.title_box {
  display: flex;
  align-items: center;

  .title_text1 {
    font-size: 16px;
    font-weight: bold;
    color: #485264;
    margin-bottom: 3px;
    margin-left: 5px;
  }

  .title_text2 {
    font-size: 12px;
    color: #667085;
    margin-left: 5px;
  }
}

.quote_list {
  max-height: 500px;
  overflow-y: auto;
}

.quote_box {
  padding: 8px;
  border: 1px solid #dfe2ea;
  border-radius: 6px;
  margin-bottom: 8px;

  .quote_heder {
    margin-bottom: 6px;
  }

  .quote_title {
    font-size: 14px;
    color: #000;
    margin-bottom: 3px;
  }

  .quote_content {
    font-size: 13px;
    color: #485264;
    margin-bottom: 8px;
  }

  .falstelTag {
    margin-left: 5px;
    cursor: pointer;
  }

  .quote_foot {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .quote_foot_left {
      display: flex;
      align-items: center;
      overflow-x: auto;
      overflow-y: hidden;
      width: 100%;
    }
  }
}

.quote_btn {
  visibility: hidden;
  cursor: pointer;

  &:hover {
  }
}

.quote_box:hover .quote_btn {
  visibility: visible;
}
</style>
